const code = `<template>
<!-- <div>
      <img class="sdde" :src="" />
      <pre name="code" class="brush: js; gutter: false;">
              function foo() {
                  var i = 3;
              }
       
      /**
          * SyntaxHighlighter
          */
          function foo() {
              if (counter >= 10)
                  return;
              // it works!
          }
       </pre
      >
      <button @click="handle">变化</button>
  </div> -->

<div v-highlight>
  <pre>
          <code v-html="code">
          <!-- 高亮代码块 -->
           function foo() {
                  var i = 3;
              }
       
      /**
          * SyntaxHighlighter
          */
          function foo() {
              if (counter >= 10)
                  return;
              // it works!
          }
          {{code}}
          </code>
      </pre>
</div>
</template>

<script>
import { syntaxhighlighter } from "./syntaxhighlighter.js";
import code from "./code";

export default {
data() {
  return {
    publicPath: process.env.BASE_URL,
    syntaxhighlighter: syntaxhighlighter,
    code: this.HTMLEncode(code)
  };
},
methods: {
    HTMLDecode(text) {    
   var temp = document.createElement("div");    
   temp.innerHTML = text;    
   var output = temp.innerText;    
   temp = null;    
   return output; 
},
HTMLEncode(html) {    
  var temp = document.createElement ("div");    
  (temp.textContent != null) ? (temp.textContent = html) : (temp.innerText = html);   
  var output = temp.innerHTML;   
  temp = null;    
  return output; 
},
  async handle() {
    await syntaxhighlighter();
    window.SyntaxHighlighter.all();
  },
},
// async mounted() {
//     await syntaxhighlighter()
//         window.SyntaxHighlighter.all()
// },
created() {
  // console.log('初始化')
},
};
</script>

<style lang="less">
// @import '../../../../public/syntaxhighlighter/styles/shCore.css';
// @import '../../../../public/syntaxhighlighter/styles/shThemeRDark.css';
</style>`

export default code